<!--
 * @Author: boyyang
 * @Date: 2022-02-03 14:27:56
 * @LastEditTime: 2022-02-05 13:39:18
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\src\views\chatRoom\components\message.vue
-->

<template>
    <div class="message">
        <div class="message-box">
            <div class="header-wrapper">
                <div class="user-header">
                    <img :src="props.avaterUrl" />
                </div>
                <div class="user-name">{{ props.name }}</div>
                <div
                    class="time"
                >{{ moment((props.time as number) * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
            </div>

            <div class="message-content">
                <img :src="imgs && imgs[0].url" v-if="imgs && imgs[0].url" />
                <span class="message-text" v-else>{{ props.message }}</span>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import moment from 'moment'
interface IMessageItemProps {
    avaterUrl?: string;
    message?: string;
    name?: string;
    time?: string | number
    imgs?: any[]
}

const props = withDefaults(defineProps<IMessageItemProps>(), {
})

</script>

<style scoped lang="scss">
.message {
    box-sizing: border-box;
    margin-bottom: 5px;
    .message-box {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .header-wrapper {
            display: flex;
            position: relative;

            .user-name {
                margin-left: 15px;
                font-size: 15px;
                color: whitesmoke;
            }

            .time {
                position: absolute;
                right: 10px;
                font-size: 10px;
                color: whitesmoke;
                font-weight: bold;
            }
        }
        .user-header {
            box-sizing: border-box;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background-color: rgb(32, 123, 139);
            overflow: hidden;

            border: 2px solid whitesmoke;

            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .message-content {
            box-sizing: border-box;
            display: flex;
            padding: 20px;

            img {
                width: 400px;
                border-radius: 4px;
            }
            .message-text {
                box-sizing: border-box;
                background-color: rgba(0, 0, 0, 0.3);
                padding: 10px 15px;
                border-radius: 8px;

                font-family: "Gill Sans", "Gill Sans MT", Calibri,
                    "Trebuchet MS", sans-serif;
                font-size: 16px;
                color: whitesmoke;

                line-height: 25px;
            }
        }
    }
}

@media screen and (max-width: 1000px) {
    .message {
        .message-box {

            .message-content {
                img {
                    width: 300px;
                }
            }
        }
    }
}
</style>
